<template>
  <div class="calendar">
    <div class="calendar_header">
      <div @click="showMonth = true" class="show_month">{{ getFormatMonth(currentDate) }}</div>
      <van-datetime-picker
        class="select_month"
        v-model="currentDate"
        v-if="showMonth"
        type="year-month"
        :formatter="formatter"
        @cancel="showMonth = false"
        @confirm="showMonth = false"
      />
      <div @click="handleGoBookkeeping">记一笔</div>
    </div>
    <div class="calendar_content">
      <calendar-bill :current-date="currentDate" @select="handleClickDate"></calendar-bill>
    </div>
    <div class="calendar_bill">
      <daily-bill-card :data="billData" v-if="billVisible"></daily-bill-card>
      <div v-else>今日你没有记账哦</div>
    </div>
  </div>
</template> 

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import DailyBillCard from '@/components/bill/DailyBillCard.vue'
import dayjs from 'dayjs';
import { useRouter } from 'vue-router';
import CalendarBill from '@/components/calendar/CalendarBill.vue';
import { getBillListForRange } from '@/api/bill';
export default defineComponent({
    components: {
    DailyBillCard,
    CalendarBill
},
    setup() {
      const router = useRouter()
      const showDate = reactive({
        minDate: new Date(2022, 6, 1),
        maxDate: new Date(2022, 6, 31)
      });
      const billData = ref({})
      const billVisible = ref(false)
      const showMonth = ref(false)
      const currentDate = ref(new Date())
      const selectDate = ref(new Date())
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const formatter = (type: string, val: any) => {
        if (type === 'year') {
          return `${val}年`;
        }
        if (type === 'month') {
          return `${val}月`;
        }
        return val;
      };
      const handleGoBookkeeping = () => {
        router.push({
          path: '/bookkeeping',
          query: {
            date: JSON.stringify(selectDate.value)
          }
        })
      }
      const getFormatMonth = (value: Date) => {
        return dayjs(value).format('YYYY年M月')
      }
      const handleClickDate = (date: Date) => {
        selectDate.value = date
        handleGetDateBill(date)
      }
      const handleGetDateBill = (date: Date) => {
        const start = dayjs(date).format('YYYY-MM-DD 00:00:00')
        const end = dayjs(date).format('YYYY-MM-DD 23:59:59')
        getBillListForRange({
          start,
          end,
          type: 'day'
        }).then((res) => {
          if(typeof res.code === 'number' && res.code === 100) {
            if(res.data) {
              billData.value = res.data[0]
              billVisible.value = true
            } else {
              billData.value = {}
              billVisible.value = false
            }
          }
        })
      }
      // onMounted(() => {
      //   handleGetDateBill(new Date())
      // })
      return {
        showDate,
        billData,
        billVisible,
        showMonth,
        currentDate,
        formatter,
        handleGoBookkeeping,
        getFormatMonth,
        handleClickDate
      };
    }
})
</script>

<style scoped>
  .calendar_header {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    margin: 20px;
  }
  .calendar_bill {
    margin: 0 10px;
  }
  ::v-deep .van-calendar__header {
    box-shadow: none !important;
  }
  ::v-deep .van-calendar__header-title {
    display: none !important;
  }
  ::v-deep .van-calendar__header-subtitle {
    display: none !important;
  }
  .show_month {
    position: relative;
  }
  .select_month {
    position: absolute;
    top: 50px;
    left: 8px;
    box-shadow: #ccc 2px 2px 6px;
  }
</style>